import { Tabs } from 'nextra/components';
import { Widget } from '@/components/demo/widget.tsx';
import LinkBadge from '@/components/ui/link-badge/link-badge.tsx';
import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';

# Dialog

A modal dialog interrupts the user with important content and expects a response.

<LinkBadgeGroup>
    <LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.dialog"/>
</LinkBadgeGroup>

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='dialog' query={{vertical: "false"}} height={400}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart copy
    Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        FButton(
          mainAxisSize: MainAxisSize.min,
          onPress: () => showFDialog(
            context: context,
            builder: (context, style, animation) => FDialog(
              style: style,
              animation: animation,
              direction: Axis.horizontal,
              title: const Text('Are you absolutely sure?'),
              body: const Text('This action cannot be undone. This will permanently delete your account and remove your data from our servers.'),
              actions: [
                FButton(style: FButtonStyle.outline(), onPress: () => Navigator.of(context).pop(), child: const Text('Cancel')),
                FButton(onPress: () => Navigator.of(context).pop(), child: const Text('Continue')),
              ],
            ),
          ),
          child: const Text('Show Dialog'),
        ),
      ],
    );
    ```
  </Tabs.Tab>
</Tabs>

## CLI

To generate and customize this style:

```shell copy
dart run forui style create dialog
```

## Usage

### `showFDialog(...)`

```dart copy
showFDialog<T>(
  context: context,
  builder: (context, style, animation) => FDialog(...),
  useRootNavigator: false,
  routeStyle: FDialogRouteStyle(...),
  style: FDialogStyle(...),
  barrierLabel: 'Label',
  barrierDismissible: true,
  routeSettings: RouteSettings(...),
  transitionAnimationController: AnimationController(...),
  anchorPoint: Offset.zero,
  useSafeArea: false,
);
```

### `FDialog(...)`

```dart copy
FDialog(
  style: FDialogStyle(...),
  animation: Animation<double>(...),
  direction: Axis.horizontal,
  title: const Text('Are you absolutely sure?'),
  body: const Text('This action cannot be undone. This will permanently delete your account and remove your data from our servers.'),
  actions: [
    FButton(style: FButtonStyle.outline(), onPress: () => Navigator.of(context).pop(), child: const Text('Cancel')),
    FButton(onPress: () => Navigator.of(context).pop(), child: const Text('Continue')),
  ],
);
```

### `FDialog.adaptive(...)`

```dart copy
FDialog.adaptive(
  style: FDialogStyle(...),
  animation: Animation<double>(...),
  title: const Text('Are you absolutely sure?'),
  body: const Text('This action cannot be undone. This will permanently delete your account and remove your data from our servers.'),
  actions: [
    FButton(style: FButtonStyle.outline(), onPress: () => Navigator.of(context).pop(), child: const Text('Cancel')),
    FButton(onPress: () => Navigator.of(context).pop(), child: const Text('Continue')),
  ],
);
```

### `FDialog.raw(...)`

```dart copy
FDialog.raw(
  style: FDialogStyle(...),
  animation: Animation<double>(...),
  builder: (context, style) => const Placeholder(),
);
```

## Examples

### Horizontal Layout

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='dialog' query={{vertical: "false"}} height={400}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart {12} copy
    Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        IntrinsicWidth(
          child: FButton(
            child: const Text('Show Dialog'),
            onPress: () => showFDialog(
              context: context,
              builder: (context, style, animation) => FDialog(
                style: style,
                animation: animation,
                direction: Axis.horizontal,
                title: const Text('Are you absolutely sure?'),
                body: const Text('This action cannot be undone. This will permanently delete your account and remove your data from our servers.'),
                actions: [
                  FButton(style: FButtonStyle.outline(), onPress: () => Navigator.of(context).pop(), child: const Text('Cancel')),
                  FButton(onPress: () => Navigator.of(context).pop(), child: const Text('Continue')),
                ],
              ),
            ),
          ),
        ),
      ],
    );
    ```
  </Tabs.Tab>
</Tabs>

### Vertical Layout

We recommend using the vertical layout on mobile devices.

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='dialog' query={{vertical: "true"}} height={400}/>
  </Tabs.Tab>
  <Tabs.Tab>
      ```dart copy
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          IntrinsicWidth(
            child: FButton(
              child: const Text('Show Dialog'),
              onPress: () => showFDialog(
                context: context,
                builder: (context, style, animation) => FDialog(
                  style: style,
                  animation: animation,
                  title: const Text('Are you absolutely sure?'),
                  body: const Text('This action cannot be undone. This will permanently delete your account and remove your data from our servers.'),
                  actions: [
                    FButton(onPress: () => Navigator.of(context).pop(), child: const Text('Continue')),
                    FButton(style: FButtonStyle.outline(), onPress: () => Navigator.of(context).pop(), child: const Text('Cancel')),
                  ],
                ),
              ),
            ),
          ),
        ],
      );
      ```
  </Tabs.Tab>
</Tabs>

### Blurred Barrier

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='dialog' variant='blurred' height={400}/>
  </Tabs.Tab>
  <Tabs.Tab>
      ```dart {7-12, 15} copy
      Column(
        children: [
          IntrinsicWidth(
            child: FButton(
              child: const Text('Show Dialog'),
              onPress: () => showFDialog(
                routeStyle: context.theme.dialogRouteStyle.copyWith(
                  barrierFilter: (animation) => ImageFilter.compose(
                    outer: ImageFilter.blur(sigmaX: animation * 5, sigmaY: animation * 5),
                    inner: ColorFilter.mode(context.theme.colors.barrier, BlendMode.srcOver),
                  ),
                ),
                context: context,
                builder: (context, style, animation) => FDialog(
                  style: style,
                  animation: animation,
                  title: const Text('Are you absolutely sure?'),
                  body: const Text('This action cannot be undone. This will permanently delete your account and remove your data from our servers.'),
                  actions: [
                    FButton(onPress: () => Navigator.of(context).pop(), child: const Text('Continue')),
                    FButton(style: FButtonStyle.outline(), onPress: () => Navigator.of(context).pop(), child: const Text('Cancel')),
                  ],
                ),
              ),
            ),
          ),
        ],
      );
      ```
  </Tabs.Tab>
</Tabs>
